<template>
  <div class="ksd-ad-modal animate__animated animate__fadeInUpBig" v-show="showModal">
    <a class="ksd-ad-close" href="javascript:void(0);" @click="handleClose">
      <n-icon>
        <Close/>
      </n-icon>
    </a>
    <nuxt-link :to="item.skipValue" :target="item.openMark" :title="item.skipTitle">
      <img
          class="carousel-img"
          v-lazy="item.cover"
      >
    </nuxt-link>
  </div>
  <div class="ksd-ad-modal-mask" v-show="showModal"></div>
</template>
<script setup>
const showModal = ref(false)
const currentIndex = ref(0)
const adLen = ref(0)
const bannerList = ref([])
const item = ref({}) // 当前展示
// 获取状态管理，用户记录用户关闭关闭的信息，防止档次操作不要在出现关闭的广告，而是退出浏览器或者下次登录继续出现
const bannerStore = useStore.bannerState()

// 自定义属性
const props = defineProps({
  height: {
    type: Number,
    default: 150
  },
  type: {
    type: Number,
    default: 7
  },
  duration: {
    type: Number,
    default: 5000
  }
})

// 关闭方法
const handleClose = ()=>{
  currentIndex.value++
  // 关闭广告，记录当次出现，后续不出现，只要退出浏览器和退出账号下次在出现
  bannerStore.setBannerOpen(false)
  if(currentIndex.value == adLen.value){
    showModal.value = false
    currentIndex.value = 0
  }else {
    item.value = bannerList.value[currentIndex.value]
    showModal.value = true
  }
}

/**
 * 查询广告接口
 * @returns {Promise<void>}
 */
const handleLoadBannerData = async () => {
  const resp = await useLoadAdvertList(props.type)
  if(resp.data && resp.data.length > 0) {
    adLen.value = resp.data.length
    bannerList.value = resp.data
    item.value = resp.data[0]
    showModal.value = true
  }
}

onMounted(() => {
  if(bannerStore.isOpen) {
    handleLoadBannerData()
  }else{
    showModal.value = false
  }
})
</script>
<style scoped>
.ksd-ad-modal {
  width: 480px;
  height: 480px;
  background: #fff;
  border-radius: 6px;
  position: fixed;
  right: 0;
  left: 0;
  margin: 0 auto;
  box-shadow: 0 0 10em #ccc;
  top: 100px;
  z-index: 10000;
}

.ksd-ad-modal img{
  object-fit: cover;
  border-radius: 6px;
}

.ksd-ad-close {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
  font-size: 28px;
}

.ksd-ad-modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .4);
  z-index: 9999;
}
</style>